<template>
  <div class="container" v-if="isOnline">
    <main class="mian_conten">
      <router-view></router-view>
    </main>
    <!-- <div class="footer"> -->
    <!-- <Footer/> -->
    <router-view name="footerView"></router-view>
    <!-- </div> -->
  </div>
  <p v-else>
    <van-empty image="network" description="网络出现错误了" />
  </p>

</template>


<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import footerView from '@/components/Footer/footerView.vue';
import router from './router';
const activeName = ref('b');
const isOnline = ref(navigator.onLine); // 使用 navigator.onLine 判断初始状态



const handleOffline = () => {
  isOnline.value = false; // 更新在线状态
  router.push('/'); // 导航到无网络页面
};

const handleOnline = () => {
  isOnline.value = true; // 更新在线状态
  // 根据具体需求，你可以选择导航到主页或保持在当前页面
  router.push('/'); // 如果需要返回到主页，请取消注释
};

onMounted(() => {
  window.addEventListener('offline', handleOffline); // 添加离线事件监听
  window.addEventListener('online', handleOnline); // 添加在线事件监听
});

onBeforeUnmount(() => {
  window.removeEventListener('offline', handleOffline); // 移除离线事件监听
  window.removeEventListener('online', handleOnline); // 移除在线事件监听
});

</script>



<style lang="scss">
html,
body,
#app,
.container {
  height: 100%;
}

html {
  font-size: 26.66666666666vw;
}

body {
  font-size: 12px;
}

a {
  color: #ccc;
}

.container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  // background: blue;



}

.mian_conten {
  flex: 1;
  overflow: auto;
}




.header {
  height: 0.44rem;
  // background-color: blue;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  .tbp_title {
    width: 100%;
    // background-color: red;
    text-align: center;
    flex: 1;



  }
}



.header .router-link-active {
  color: black;
  font-size: 0.2rem;
}
</style>